<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 
    watch 选项期望接受一个对象，其中键是需要侦听的响应式组件实例属性(例如，通过 data 或computed 声明的属性)--值是相应的回调函数。该回调函数接受被侦听源的新值和旧值。


 -->
    <div id="app">
        <!-- v-model双向绑定mytext, 当input变化时，如果要监测，可以使用watch-->
        <input type="text" v-model="mytext">
        <select v-model="obj.year">
          <option value="2021">2021</option>
          <option value="2022">2022</option>
          <option value="2023">2023</option>
          <option value="2024">2024</option>
        </select>
        <select v-model="obj.month">
          <option value="10">10</option>
          <option value="11">11</option>
          <option value="12">12</option>
        </select>
        <select v-model="obj.day">
          <option value="25">25</option>
          <option value="26">26</option>
          <option value="27">27</option>
        </select>
    </div>
    <script>
        var obj = {
            data() {
                return {
                    mytext: '',
                    // 黙认情况下，watch不能监听对象
                    obj: {
                        year: 2023,
                        month: 12,
                        day: 25
                    }
                }
            },
            // 有不同写法，在watch中监测mytext的变化,但
            // 1.watch中只能监测一个属性，不能监测多个属性
            // 2.watch中监测的属性名和回调函数的属性名必须一致
            // 也可以
            // 1.watch中可以监测多个属性
            // 2.watch中监测的属性名和回调函数的属性名可以不一致
            // 3.watch中监测的属性名和回调函数的属性名可以不一致，但回调函数的属性名必须和回调函数的属性名一致
            //下面在watch中监测mytext的变化，
            //当mytext变化时，调用anyfunc函数，anyfunc函数的参数是newval和oldval
            // newval是mytext的新值，oldval是mytext的旧值。而函数放在方法中。
            watch: {
                mytext: "anyfunc",
                // 下面写法不会监测到
                obj: function(value) {
                    console.log(value);
                },
                // 改为下面写法就行：
                // 'obj.year': function(value) {
                //     console.log(value);
                // },
                // "obj.month": function(value) {
                //     console.log(value);
                // },
                // 'obj.day': function(value) {
                //     console.log(value);
                // },

                // 简写：
                // "obj.year": "anyfunc",
                // "obj.month": "anyfunc",
                // 'obj.day': "anyfunc",

                // 还可以这样写：
                obj: {
                    handler: "anyfunc",
                    deep: true, //复杂对象进行深度监听
                    // 能不能一进入页面就触发监听一次，不要等改变年月日才触发
                    // 有，immediate: true
                    immediate: true
                }
            },
            methods: {
                anyfunc(newval, oldval) {
                    console.log(newval)
                }
            },
        }

        var app = Vue.createApp(obj).mount('#app')
    </script>
</body>

</html>